<template>
  <div>
    <LoadingView v-if="showLoading" />
    <div class="product" v-if="goodsProduct" ref="scroll">
      <div class="product-header" v-if="!showTopBar">
        <img
          @click="$router.back()"
          src="	https://image-mall.gxptkc.com/m/resources//point/goods/go_back.png"
          alt=""
        />
        <img
          @click="showModal = true"
          src="https://image-mall.gxptkc.com/m/resources//goods_detail/more_tips.png"
          alt=""
        />
      </div>
      <div class="product-scroll-header" v-if="showTopBar">
        <img
          @click="$router.back()"
          src="	https://image-mall.gxptkc.com/m/resources//point/goods/back.png"
          alt=""
        />
        <span @click="toGoods" :class="{ bordercolor: topBarStyle == 0 }"
          ><a href="javascript:void(0)">商品</a></span
        >
        <span @click="toComment" :class="{ bordercolor: topBarStyle == 1 }"
          ><a href="javascript:void(0)">评价</a></span
        >
        <span @click="toRecommend" :class="{ bordercolor: topBarStyle == 2 }"
          ><a href="javascript:void(0)">推荐</a></span
        >
        <span @click="toDetail" :class="{ bordercolor: topBarStyle == 3 }"
          ><a href="javascript:void(0)">详情</a></span
        >
        <img
          @click="showModal = true"
          src="https://image-mall.gxptkc.com/m/resources/goods_detail/more.png"
          alt=""
        />
      </div>
      <div class="modal-box" v-if="showModal" @click="showModal = false">
        <ul>
          <li @click="$router.push('/')">
            <svg
              t="1671723450822"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2206"
              width="200"
              height="200"
            >
              <path
                d="M969.6 502.4l-118.4-112-323.2-300.8c-9.6-9.6-22.4-9.6-32 0l-313.6 297.6c-3.2 3.2-6.4 6.4-9.6 9.6l-118.4 112c-9.6 9.6-9.6 22.4 0 32s22.4 9.6 32 0l83.2-80 0 393.6c0 48 41.6 89.6 92.8 89.6l83.2 0c38.4 0 70.4-28.8 70.4-67.2l0-217.6 99.2 0 99.2 0 0 217.6c0 35.2 32 67.2 70.4 67.2l83.2 0c51.2 0 92.8-38.4 92.8-89.6l0-396.8 80 73.6c9.6 9.6 22.4 9.6 32 0C979.2 524.8 979.2 512 969.6 502.4zM809.6 857.6c0 25.6-19.2 44.8-44.8 44.8l-83.2 0c-12.8 0-22.4-9.6-22.4-22.4L659.2 640c0-12.8-9.6-22.4-22.4-22.4l-121.6 0-121.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 240c0 12.8-9.6 22.4-22.4 22.4l-83.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-438.4 294.4-281.6 294.4 281.6L809.6 857.6z"
                p-id="2207"
              ></path>
            </svg>
            <span>首页</span>
          </li>
          <li @click="$router.push('cart')">
            <svg
              t="1671723585781"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5139"
              width="200"
              height="200"
            >
              <path
                d="M352.456912 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C416.446162 860.586595 387.891819 832.032253 352.456912 832.032253L352.456912 832.032253z"
                fill="#575B66"
                p-id="5140"
              ></path>
              <path
                d="M800.55367 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C864.54292 860.586595 835.816563 832.032253 800.55367 832.032253L800.55367 832.032253z"
                fill="#575B66"
                p-id="5141"
              ></path>
              <path
                d="M864.026877 800.037628 344.200235 800.037628c-46.099782 0-86.695112-36.466991-92.199563-83.082815l-54.356459-382.043339L166.853687 156.360826c-1.892155-15.653284-16.169326-28.382328-29.930455-28.382328L95.983874 127.978498c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l40.767344 0c46.615824 0 87.727196 36.466991 93.403662 83.082815l30.790526 177.86259L315.473879 708.698135c1.720141 14.793214 15.309256 27.350244 28.726356 27.350244l519.826642 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S881.744331 800.037628 864.026877 800.037628z"
                fill="#575B66"
                p-id="5142"
              ></path>
              <path
                d="M384.279523 672.05913c-16.685369 0-30.618512-12.729044-31.82261-29.586427-1.376113-17.545439 11.868974-33.026709 29.586427-34.230808l434.163615-31.994625c15.997312-0.172014 29.414413-12.55703 31.134554-26.834201l50.400134-288.295649c1.204099-10.664875-1.720141-22.533848-8.084663-29.758441-4.128339-4.644381-9.288762-7.052579-15.309256-7.052579L319.946246 224.3064c-17.717453 0-31.994625-14.277171-31.994625-31.994625S302.400806 159.973123 319.946246 159.973123l554.05745 0c24.426004 0 46.959852 10.148833 63.301193 28.554342 18.749538 21.157736 27.178229 50.744163 23.565933 81.706703l-50.400134 288.467663c-5.504452 44.895683-45.927768 81.362674-92.027549 81.362674l-431.755417 31.82261C385.82765 671.887116 384.967579 672.05913 384.279523 672.05913z"
                fill="#575B66"
                p-id="5143"
              ></path>
            </svg>
            <span>购物车</span>
          </li>
          <li @click="$router.push('/own')">
            <svg
              t="1671723625622"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6091"
              width="200"
              height="200"
            >
              <path
                d="M634.65472 581.91872c92.89728-45.48608 157.02016-140.65664 157.02016-251.04384C791.67488 176.41472 666.46016 51.2 512 51.2c-154.46016 0-279.67488 125.21472-279.67488 279.67488 0 110.3872 64.12288 205.57824 157.02016 251.04384-154.15296 49.37728-270.25408 188.7232-282.46016 357.56032-1.2288 17.12128 11.63264 31.98976 28.75392 33.23904 17.24416 1.20832 31.98976-11.65312 33.23904-28.75392C181.80096 764.90752 332.53376 624.64 512 624.64s330.19904 140.26752 343.1424 319.32416c1.18784 16.36352 14.82752 28.83584 30.96576 28.83584 0.75776 0 1.51552-0.02048 2.27328-0.08192 17.12128-1.2288 29.98272-16.11776 28.75392-33.23904C904.92928 770.64192 788.82816 631.296 634.65472 581.91872zM294.48192 330.87488c0-120.13568 97.3824-217.51808 217.51808-217.51808 120.13568 0 217.51808 97.3824 217.51808 217.51808S632.13568 548.39296 512 548.39296C391.86432 548.39296 294.48192 451.01056 294.48192 330.87488z"
                fill="#515151"
                p-id="6092"
              ></path>
            </svg>
            <span> 个人中心</span>
          </li>
        </ul>
      </div>
      <van-swipe
        @change="onChange"
        :style="{ width: '375rem', height: '375rem' }"
      >
        <van-swipe-item
          class="item"
          v-for="(image, index) in goodsProduct?.defaultProduct?.goodsPics"
          :key="index"
        >
          <img
            v-lazy="image"
            fit="content"
            @click="showPreview(goodsProduct?.defaultProduct?.goodsPics)"
          />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            {{ current + 1 }}/{{ goodsProduct.defaultProduct.goodsPics.length }}
          </div>
        </template>
      </van-swipe>

      <div class="goods-info">
        <div class="goods-price">
          <div class="left">
            <span>
              ￥{{ goodsProduct.defaultProduct.productPrice?.toFixed(2) }}</span
            >
          </div>
          <ul class="right">
            <li>
              <svg
                v-if="collection"
                @click="toCollection(goodsProduct.defaultProduct.productId)"
                t="1672161228661"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2224"
                width="200"
                height="200"
              >
                <path
                  d="M508.765841 890.615107c-22.497387 0-239.805668-174.754093-322.129628-280.598746C130.011564 558.358841 84.231915 461.96442 84.231915 394.016889c0-144.30664 105.672738-261.651208 235.55997-261.651208 79.31851 0 146.614196 65.640999 188.169637 133.459594 41.529859-67.818595 108.825544-133.459594 188.16759-133.459594 129.888256 0 235.557924 117.344568 235.557924 261.651208 0 68.12354-46.020126 164.689876-102.881159 216.434377C745.698065 717.647707 532.525987 890.615107 508.765841 890.615107z"
                  fill="#d81e06"
                  p-id="2225"
                ></path>
              </svg>
              <svg
                v-else
                @click="toCollection(goodsProduct.defaultProduct.productId)"
                t="1671808110807"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4320"
                width="200"
                height="200"
              >
                <path
                  d="M908.8 214.4c-9.6-12.8-19.2-22.4-28.8-32-112-115.2-230.4-105.6-342.4-16-9.6 6.4-19.2 16-28.8 25.6-9.6-9.6-19.2-16-28.8-25.6-112-86.4-230.4-99.2-342.4 16-9.6 9.6-19.2 19.2-25.6 32-134.4 195.2-60.8 387.2 137.6 560 44.8 38.4 89.6 73.6 137.6 102.4 16 9.6 32 19.2 44.8 28.8 9.6 6.4 12.8 9.6 19.2 9.6 3.2 3.2 6.4 3.2 12.8 6.4 3.2 3.2 9.6 3.2 16 6.4 25.6 6.4 64 3.2 89.6-12.8 3.2 0 9.6-3.2 16-9.6 12.8-6.4 28.8-16 44.8-28.8 48-28.8 92.8-64 137.6-102.4C969.6 598.4 1043.2 406.4 908.8 214.4zM736 732.8c-41.6 35.2-86.4 70.4-131.2 99.2-16 9.6-28.8 19.2-44.8 25.6-6.4 3.2-12.8 6.4-16 9.6-6.4 3.2-16 6.4-25.6 9.6-3.2 0-6.4 0-9.6 0-6.4 0-12.8 0-16 0-3.2 0-3.2 0-3.2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0-3.2 0-3.2-3.2-3.2 0-6.4-3.2-9.6-3.2-3.2-3.2-9.6-6.4-16-9.6-12.8-6.4-28.8-16-44.8-25.6-44.8-28.8-89.6-60.8-131.2-99.2-179.2-160-243.2-323.2-131.2-489.6 6.4-9.6 16-16 22.4-25.6 89.6-96 182.4-86.4 275.2-12.8 9.6 6.4 16 12.8 22.4 19.2 0 0 0 0 0 0l28.8 32c3.2 3.2 3.2 3.2 6.4 6.4 0 0 0 0 0 0l0 0c3.2-3.2 9.6-9.6 16-16 12.8-12.8 25.6-25.6 41.6-38.4 92.8-73.6 185.6-83.2 275.2 12.8 6.4 9.6 16 16 22.4 25.6C982.4 406.4 918.4 572.8 736 732.8z"
                  p-id="4321"
                  fill="#515151"
                ></path>
              </svg>
              <span>收藏</span>
            </li>
            <li @click="toShare">
              <svg
                t="1671808418222"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5522"
                width="200"
                height="200"
              >
                <path
                  d="M853.333333 533.333333a32 32 0 0 1 64 0v266.666667c0 64.8-52.533333 117.333333-117.333333 117.333333H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V256c0-64.8 52.533333-117.333333 117.333333-117.333333h277.333333a32 32 0 0 1 0 64H224a53.333333 53.333333 0 0 0-53.333333 53.333333v544a53.333333 53.333333 0 0 0 53.333333 53.333333h576a53.333333 53.333333 0 0 0 53.333333-53.333333V533.333333z m-42.058666-277.333333l-89.792-95.402667a32 32 0 0 1 46.613333-43.861333l140.544 149.333333C927.861333 286.485333 913.376 320 885.333333 320H724.704C643.029333 320 576 391.210667 576 480v192a32 32 0 1 1-64 0V480c0-123.296 94.784-224 212.704-224h86.570667z"
                  fill="#515151"
                  p-id="5523"
                ></path>
              </svg>
              <span>分享</span>
            </li>
          </ul>
        </div>
        <div class="goods-content">
          <div class="title">
            <p>{{ goodsProduct.goodsName }}</p>
          </div>
          <div class="address">
            <p>{{ goodsProduct.goodsBrief }}</p>
          </div>
        </div>
      </div>

      <div class="deliver">
        <div class="choose" @click="changeChooseShow(true)">
          <div class="choose-left">
            <span>已选</span>
            <span>默认</span>
          </div>
          <div class="choose-right">
            <img
              src="	https://image-mall.gxptkc.com/m/resources/goods_detail/right_down.png"
              alt=""
            />
          </div>
        </div>
        <div class="send">
          <div class="send-location">
            <span>发货</span>
            <img
              src="https://image-mall.gxptkc.com/m/resources/goods_detail/sel_address.png"
              alt=""
            />
          </div>
          <span
            >快递:{{ goodsProduct.deliverInfo.expressFee?.toFixed(2) }}元</span
          >
          <span>已销{{ goodsProduct.sales }}</span>
        </div>
      </div>

      <div class="goods-comment" ref="comment">
        <div class="comment-title">
          <div class="left">
            <span>商品评价</span>
            <span v-if="commentList.commentsCount"
              >({{ commentList.commentsCount }})</span
            >
            <span v-if="!commentList.commentsCount">暂无评价</span>
            <span v-else>好评率{{ commentList.highPercent }}</span>
          </div>
          <div
            class="right"
            @click="
              $router.push({
                path: '/comment',
                query: { productId: $route.query.productId },
              })
            "
          >
            <span>查看更多</span>
            <img
              src="https://image-mall.gxptkc.com/m/resources/goods_detail/right_down.png"
              alt=""
            />
          </div>
        </div>
        <ul class="comment-content">
          <li
            v-for="item in commentList.list.slice(0, 1)"
            :key="item.commentId"
          >
            <div class="user-msg">
              <img v-lazy="item.memberAvatar" alt="" />
              <span>{{ item.memberName }}</span>
              <ul class="start">
                <li v-for="(i, index) in item.score" :key="index">
                  <svg
                    t="1671812233401"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="10930"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M512.005628 86.322018 619.43129 394.883629l340.15005 2.428306L696.758446 605.436042 800.160467 937.679006 512.005628 739.707119 223.851812 937.679006l96.717785-336.665693L64.416614 397.311935l340.16233-2.428306L512.005628 86.322018z"
                      fill="#d81e06"
                      p-id="10931"
                    ></path>
                  </svg>
                </li>
              </ul>
            </div>
            <div class="user-comment">
              <p>{{ item.content }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="store">
        <div class="store-msg">
          <div class="logo">
            <img v-lazy="storeMsg.storeLogo" fit="cover" alt="" />
          </div>
          <div class="msg">
            <div class="title">{{ storeMsg.storeName }}</div>
            <div class="type">
              <span>自营</span>
              <span>{{ storeMsg.followNumber }}人关注</span>
            </div>
          </div>
        </div>
        <div class="store-score">
          <ul class="list">
            <li>
              <span>描述相符</span>
              <span>{{ storeMsg.descriptionScore }}</span>
              <img
                src="https://image-mall.gxptkc.com/m/resources/goods_detail/high.png"
                alt=""
                v-if="storeMsg.descriptionScore >= 4.5"
              />
              <img
                src="	https://image-mall.gxptkc.com/m/resources/goods_detail/middle.png"
                alt=""
                v-else
              />
            </li>
            <li>
              <span>服务态度</span>
              <span>{{ storeMsg.serviceScore }}</span>
              <img
                src="https://image-mall.gxptkc.com/m/resources/goods_detail/high.png"
                alt=""
                v-if="storeMsg.descriptionScore >= 4.5"
              />
              <img
                src="	https://image-mall.gxptkc.com/m/resources/goods_detail/middle.png"
                alt=""
                v-else
              />
            </li>
            <li>
              <span>发货速度</span>
              <span>{{ storeMsg.deliverScore }}</span>
              <img
                src="https://image-mall.gxptkc.com/m/resources/goods_detail/high.png"
                alt=""
                v-if="storeMsg.descriptionScore >= 4.5"
              />
              <img
                src="	https://image-mall.gxptkc.com/m/resources/goods_detail/middle.png"
                alt=""
                v-else
              />
            </li>
          </ul>
        </div>

        <div class="store-action">
          <img
            src="https://image-mall.gxptkc.com/m/resources/goods_detail/contact_service.png"
            alt=""
            @click="
              $router.push(`/chat?storeid=${goodsProduct?.storeInf?.storeId}`)
            "
          />
          <img
            @click="
              $router.push({
                path: '/store',
                query: { storeid: storeMsg.storeId },
              })
            "
            src="https://image-mall.gxptkc.com/m/resources/goods_detail/go_store.png"
            alt=""
          />
        </div>
      </div>
      <div class="recommend-goods" ref="recommend">
        <p>店铺推荐</p>
        <ul class="list">
          <li
            v-for="item in recommendList"
            :key="item.goodsId"
            @click="changeRecommentGoods(item)"
          >
            <div class="goods">
              <img v-lazy="item.goodsImage" alt="" />
              <p>￥{{ item.goodsPrice?.toFixed(2) }}</p>
            </div>
            <p>{{ item.goodsName }}</p>
          </li>
        </ul>
      </div>
      <div class="goods-details" ref="detail">
        <p>商品详情</p>
        <img
          src="https://image-mall.gxptkc.com/m/resources/goods_detail/spec_param_bg.png"
          alt=""
        />
        <div class="details" v-html="goodsProduct.goodsDetails"></div>
      </div>
      <div class="empty"></div>
      <div class="product-bottom">
        <ul class="action">
          <li
            @click="
              $router.push({
                path: '/store',
                query: { storeid: goodsProduct?.storeInf?.storeId },
              })
            "
          >
            <img
              src="https://image-mall.gxptkc.com/m/resources/goods_detail/store.png"
              alt=""
            />
            <span>店铺</span>
          </li>
          <li
            @click="
              $router.push(`/chat?storeid=${goodsProduct?.storeInf?.storeId}`)
            "
          >
            <img
              src="	https://image-mall.gxptkc.com/m/resources/goods_detail/service.png"
              alt=""
            />
            <span>客服</span>
          </li>
          <li @click="$router.push('/cart')">
            <img
              src="	https://image-mall.gxptkc.com/m/resources/goods_detail/cart.png"
              alt=""
            />
            <span>购物车</span>
            <div class="badge" v-if="cartNum > 0">{{ cartNum }}</div>
          </li>
        </ul>
        <div class="add-buy">
          <button @click="toBuyGoods(1)">加入购物车</button>
          <button @click="toBuyGoods(2)">立即购买</button>
        </div>
      </div>
      <GoodsChoose :goodsProduct="goodsProduct" />
      <div class="choose" @click="show = false" v-if="goodsInfo">
        <van-popup
          v-model="show"
          position="bottom"
          :style="{ height: '70%' }"
          @click="show = false"
          v-if="show"
        >
          <div class="goods">
            <div class="msg">
              <div class="left">
                <van-image
                  :src="goodsInfo.defaultProduct.goodsPics[0]"
                  alt=""
                  fit="cover"
                  width="75rem"
                  height="75rem"
                  lazy-load
                  @click.stop="showPreview(goodsInfo.defaultProduct.goodsPics)"
                />
                <div class="type">
                  <p>
                    ￥{{ goodsInfo.defaultProduct.productPrice?.toFixed(2) }}
                  </p>
                  <p>已选规格：{{ goodsInfo.defaultProduct?.getSpecValues }}</p>
                </div>
              </div>
              <div class="right">
                <img
                  @click.stop="show = false"
                  src="	https://image-mall.gxptkc.com/m/resources/goods_detail/close.png"
                  alt=""
                />
              </div>
            </div>
            <div
              class="number-type"
              v-if="goodsInfo.specs[0]?.specValueList.length > 0"
            >
              <p>选择净含量</p>
              <ul class="list">
                <li
                  v-for="i in goodsInfo.specs[0]?.specValueList"
                  :key="i.specValueId"
                  :class="{
                    active:
                      i.specValueId ==
                      goodsInfo.defaultProduct?.getSpecValueIds,
                  }"
                  @click.stop="chooseType(i.specValueId)"
                >
                  {{ i.specValue }}
                </li>
              </ul>
            </div>
            <div class="number" @click.stop="">
              <p>购买数量</p>
              <div class="counter">
                <span @click.stop="count--">-</span>
                <input type="text" v-model="count" />
                <span @click.stop="count++">+</span>
              </div>
            </div>
          </div>
          <div class="action">
            <button
              @click="addToCart(goodsInfo.defaultProduct.productId)"
              v-if="addOrBuy == 1"
              :class="{ color: addOrBuy == 1 }"
            >
              加入购物车
            </button>
            <button
              @click="toConfirm(goodsInfo.defaultProduct.productId)"
              v-else
            >
              立即购买
            </button>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog } from "vant";
import { Toast } from "vant";
import { ImagePreview } from "vant";
import { mapMutations } from "vuex";
import GoodsChoose from "@/components/GoodsChoose.vue";
import LoadingView from "@/components/LoadingView.vue";
import qs from "qs";
import { Lazyload } from "vant";

import { Image as VanImage } from "vant";

Vue.use(VanImage);

Vue.use(Lazyload);
Vue.use(Toast);
export default {
  Vue,
  components: {
    GoodsChoose,
    [Dialog.Component.name]: Dialog.Component,
    LoadingView,
  },

  data() {
    return {
      goodsProduct: null,
      goodsInfo: null,
      commentList: null,
      current: 0,
      showModal: false,
      storeMsg: null,
      recommendList: null,
      collection: false,
      token: null,
      showLoading: true,
      addOrBuy: 0,
      myInfo: null,
      show: false,
      count: 1,
      cartNum: 0,

      showTopBar: false,
      topBarStyle: 0,

      shareImg: null,
    };
  },
  methods: {
    ...mapMutations(["changeChooseShow", "toBuy"]),

    showPreview(url) {
      ImagePreview([...url]);
    },
    //监听页面滚动事件
    handleScroll() {
      if (document.documentElement.scrollTop > 50) {
        this.showTopBar = true;
      } else {
        this.showTopBar = false;
      }
    },
    toGoods() {
      this.$refs.scroll.scrollIntoView({
        behavior: "smooth", // 平滑过渡
      });
      this.topBarStyle = 0;
    },
    toComment() {
      this.$refs.comment.scrollIntoView({
        behavior: "smooth", // 平滑过渡
      });
      this.topBarStyle = 1;
    },
    toRecommend() {
      this.$refs.recommend.scrollIntoView({
        behavior: "smooth", // 平滑过渡
      });
      this.topBarStyle = 2;
    },
    toDetail() {
      this.$refs.detail.scrollIntoView({
        behavior: "smooth", // 平滑过渡
      });
      this.topBarStyle = 3;
    },

    onChange(index) {
      this.current = index;
    },
    changeRecommentGoods(item) {
      this.$router.replace({
        path: "product",
        query: {
          goodsId: item.goodsId,
          productId: item.defaultProductId,
        },
      });
      this.$router.go(0);
    },
    async toShare() {
      if (this.myInfo.data.msg == "成功") {
        console.log("可以分享");
      } else {
        Toast(this.myInfo.data.msg);
      }
    },
    async toCollection(id) {
      if (!this.collection) {
        this.collection = true;
      } else {
        this.collection = false;
      }

      let res = await this.axios({
        method: "POST",
        url: "https://m-mall.gxptkc.com/v3/member/front/followProduct/edit",
        headers: {
          "content-type": "application/x-www-form-urlencoded",
          authorization: "Bearer " + this.token,
        },
        data: qs.stringify({
          productIds: id,
          isCollect: this.collection,
        }),
      });
      if (res.data.msg == "收藏商品成功") {
        this.collection = true;
        Toast(res.data.msg);
      } else if (res.data.msg == "取消收藏商品成功") {
        Toast(res.data.msg);
      } else {
        this.collection = false;
        Dialog.confirm({
          title: "温馨提示！",
          message: "您需要先登录~",
        })
          .then(() => {
            this.$router.push({
              path: "/login",
              query: {
                goodsId: this.$route.query.goodsId,
                productId: this.$route.query.productId,
              },
            });
          })
          .catch(() => {});
      }
    },

    toBuyGoods(num) {
      //身份验证
      if (this.myInfo.data.msg == "成功") {
        this.show = true;
        this.addOrBuy = num;
      } else {
        Toast(this.myInfo.data.msg);
      }
    },
    async addToCart(id) {
      let res = await this.axios({
        url: "https://m-mall.gxptkc.com/v3/business/front/cart/add",
        method: "POST",
        headers: {
          authorization: `Bearer ${this.token}`,
          "content-type": "application/x-www-form-urlencoded",
        },
        data: qs.stringify({
          productId: id,
          number: this.count,
        }),
      });
      Toast(res.data.msg);
      this.cartNum += 1;
    },
    async chooseType(typeId) {
      let res = await this.axios({
        method: "GET",
        url: `https://m-mall.gxptkc.com/v3/goods/front/goods/productInfo?goodsId=${this.$route.query.goodsId}&specValueIds=${typeId}`,
        headers: {
          authorization: `Bearer ${this.token}`,
        },
      });
      this.goodsInfo = res.data.data;
    },
    toConfirm(productId) {
      this.$router.push(`/confirm?productId=${productId}&source=${this.count}`);
    },
  },
  async created() {
    this.token = localStorage.getItem("fastCar-token");
    let res = await this.axios({
      url: `https://m-mall.gxptkc.com/v3/goods/front/goods/details?productId=${this.$route.query.productId}&goodsId=${this.$route.query.goodsId}&source=2`,
      method: "GET",
      headers: {
        authorization: `Bearer ${this.token}`,
      },
    });

    let commentRes = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/goods/front/goods/comment?productId=${this.$route.query.productId}`
    );

    let goodsRes = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/goods/front/goods/recommendList?queryType=goods&productId=${this.$route.query.productId}`
    );

    let cartRes = await this.axios({
      method: "GET",
      url: "https://m-mall.gxptkc.com/v3/business/front/cart/cartList",
      headers: {
        authorization: `Bearer ${this.token}`,
      },
    });
    this.cartNum = cartRes.data.data?.availableCartNum || 0;

    this.goodsProduct = res.data.data;
    this.goodsInfo = this.goodsProduct;
    this.collection = this.goodsProduct.followGoods;
    this.commentList = commentRes.data.data;
    this.storeMsg = this.goodsProduct.storeInf;
    this.recommendList = goodsRes.data.data.list;

    this.showLoading = false;

    //验证身份信息
    this.myInfo = await this.axios({
      method: "GET",
      url: "https://m-mall.gxptkc.com/v3/member/front/member/memberInfo",
      headers: {
        authorization: `Bearer ${this.token}`,
      },
    });
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    document.removeEventListener("scroll", this.handleScroll);
  },
};
</script>
<style lang="scss" scoped>
.item {
  background-color: rgb(245, 245, 245);
  display: flex;
  align-items: center;
  img {
    width: 100%;
  }
}

.custom-indicator {
  position: absolute;
  right: 5rem;
  bottom: 5rem;
  padding: 2rem 5rem;
  font-size: 12rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10rem;
  color: #fff;
}

.product {
  position: relative;
  background-color: rgb(245, 245, 245);

  .product-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 50rem;
    display: flex;
    padding: 10rem;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    z-index: 9;

    img {
      width: 25rem;
    }
  }

  .product-scroll-header {
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50rem;
    width: 100vw;
    z-index: 9;
    position: fixed;
    top: 0;
    left: 0;

    span {
      font-size: 16rem;
      color: #333;
      padding: 3rem;
      box-sizing: border-box;

      // transition: all 0.3s;
      &.bordercolor {
        border-bottom: 2px solid #fc1c1c;
      }
    }

    img {
      width: 25rem;

      &:first-child {
        width: 10rem;
      }
    }
  }

  .modal-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);

    ul {
      padding: 0 10rem;
      background-color: #fff;
      border-radius: 10rem;
      width: 100rem;
      position: absolute;
      right: 10rem;
      top: 50rem;

      li {
        display: flex;
        justify-content: left;
        align-items: center;
        //   margin-bottom: 20rem;
        padding: 15rem 0;
        border-bottom: 1rem solid #eee;

        &:last-child {
          border-bottom: none;
        }

        svg {
          width: 20rem;
          height: 20rem;
        }

        span {
          font-size: 14rem;
          color: #2d2d2d;
          margin-left: 10rem;
        }

        &:last-child {
          margin-bottom: 10rem;
        }
      }
    }
  }

  .goods-info {
    padding: 10rem;
    margin-bottom: 10rem;

    box-sizing: border-box;
    background-color: #fff;

    .goods-price {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        span {
          color: #fc1c1c;
          font-size: 25rem;
        }
      }

      ul.right {
        display: flex;
        justify-content: left;
        align-items: center;

        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 20rem;

          svg {
            width: 25rem;
            height: 26rem;
          }

          span {
            color: #2d2d2d;
          }
        }
      }
    }

    .goods-content {
      .title {
        P {
          font-size: 16rem;
          color: #333;
          width: 100%;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .address {
        margin-top: 8rem;

        p {
          width: 100%;
          font-size: 14rem;
          color: #666;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .deliver {
    background-color: #fff;
    margin-bottom: 10rem;

    .choose {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rem;
      border-bottom: 1px solid rgb(245, 245, 245);

      .choose-left {
        span {
          font-size: 13rem;
          color: #666;

          &:last-child {
            font-size: 14rem;
            color: #343434;
            margin-left: 20rem;
          }
        }
      }

      .choose-right {
        img {
          width: 18rem;
        }
      }
    }

    .send {
      padding: 10rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .send-location {
        display: flex;
        align-items: center;

        span {
          font-size: 14rem;
          color: #666;
          margin-right: 20rem;
        }

        img {
          width: 10rem;
        }
      }

      > span {
        font-size: 14rem;
        color: #2d2d2d;

        &:last-child {
          color: #777;
        }
      }
    }
  }

  .goods-comment {
    background-color: #fff;
    padding: 10rem;
    margin-bottom: 10rem;
    box-sizing: border-box;

    .comment-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        span {
          font-size: 15rem;
          color: #333;

          &:nth-child(2) {
            margin-left: 4rem;
          }

          &:nth-child(3),
          &:nth-child(4) {
            color: #666;
            font-size: 12rem;
            margin-left: 10rem;
          }
        }
      }

      .right {
        display: flex;
        align-items: center;

        span {
          color: #666;
        }

        img {
          width: 18rem;
        }
      }
    }

    ul.comment-content {
      li {
        .user-msg {
          display: flex;
          align-items: center;
          margin: 10rem 0;

          img {
            width: 25rem;
            border-radius: 50%;
          }

          span {
            font-size: 13rem;
            color: #2d2d2d;
            margin: 0 10rem;
          }

          ul.start {
            display: flex;
            align-items: center;

            li {
              svg {
                width: 18rem;
                height: 18rem;
              }
            }
          }
        }

        .user-comment {
          p {
            font-size: 13rem;
            color: #2d2d2d;
          }
        }
      }
    }
  }

  .store {
    padding: 10rem;
    margin-bottom: 10rem;
    box-sizing: border-box;
    background-color: #fff;

    .store-msg {
      padding: 10rem 0 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .logo {
        width: 50rem;
        height: 50rem;
        border-radius: 10rem;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .msg {
        margin-left: 10rem;

        .title {
          font-size: 16rem;
          color: #2d2d2d;
        }

        .type {
          margin-top: 8rem;

          span {
            color: #999;

            &:nth-child(1) {
              font-size: 14rem;
              color: #fff;
              background-color: #f30300;
              border-radius: 10rem;
              padding: 1rem 3rem;
              margin-right: 10rem;
            }
          }
        }
      }
    }

    .store-score {
      padding: 15rem 0;
      border-bottom: 1px solid rgb(245, 245, 245);

      ul.list {
        display: flex;
        align-items: center;
        justify-content: space-between;

        li {
          width: 30%;
          display: flex;
          align-items: center;
          border-right: 1rem solid #ccc;

          &:last-child {
            border-right: none;
          }

          span {
            color: #555;

            &:nth-child(2) {
              color: #f5100d;
              font-weight: bold;
              margin: 0 5rem;
            }
          }

          img {
            width: 15rem;
          }
        }
      }
    }

    .store-action {
      padding-top: 15rem;
      padding-bottom: 5rem;
      display: flex;
      justify-content: center;

      img {
        width: 86rem;
        margin: 0 20rem;
      }
    }
  }

  .recommend-goods {
    width: 100%;
    background-color: #fff;
    margin-bottom: 10rem;

    > p {
      font-size: 15rem;
      color: #333;
      padding: 20rem 10rem;
    }

    ul.list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 10rem;
      box-sizing: border-box;

      li {
        width: 30%;
        margin-bottom: 15rem;

        .goods {
          position: relative;
          border-radius: 10rem;
          overflow: hidden;

          img {
            width: 100%;
            height: 111rem;
            font-size: 0;
            display: flex;
          }

          p {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 3rem 0;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.4);
            color: #fff;
            font-size: 13rem;
          }
        }

        p {
          font-size: 14rem;
          color: #2d2d2d;
          width: 100px;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-top: 10rem;
        }
      }
    }
  }

  .goods-details {
    background-color: #fff;
    padding: 15rem 8rem;

    p {
      font-size: 14rem;
      color: #2d2d2d;
      font-weight: bold;
      text-align: center;
    }

    img {
      margin-bottom: 10rem;
    }

    .details {
      font-size: 0;
    }
  }

  .empty {
    width: 100vw;
    height: 46rem;
  }

  .product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46rem;
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 5rem;
    box-sizing: border-box;
    background-color: #fff;

    .action {
      display: flex;
      justify-content: space-between;
      align-items: center;

      li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 10rem;
        position: relative;

        img {
          width: 20rem;
        }

        span {
          color: #2d2d2d;
        }
        .badge {
          width: 14rem;
          height: 14rem;
          border-radius: 50%;
          background-color: #fc1c1c;
          color: #fff;
          position: absolute;
          top: -5rem;
          right: 10rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .add-buy {
      button {
        height: 35rem;
        width: 111rem;
        color: #fff;
        background: #ff821c;
        border-radius: 17rem 0 0 17rem;
        border: none;
        font-size: 16rem;

        &:last-child {
          width: 98px;
          background: #f30300;
          border-radius: 0 17rem 17rem 0;
        }
      }
    }
  }

  .choose {
    .goods {
      padding: 10rem;

      .msg {
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;
          align-items: center;

          img {
            // width: 75rem;
            // height: 75rem;

            margin-right: 15rem;
          }

          .type {
            margin-left: 15rem;
            p {
              font-size: 25rem;
              color: #fc1c1c;

              &:last-child {
                font-size: 14rem;
                color: #343434;
                margin-top: 6rem;
                box-sizing: border-box;
              }
            }
          }
        }

        .right {
          width: 23rem;
          height: 23rem;
        }
      }

      .number-type {
        p {
          font-size: 14rem;
          color: #666;
          margin: 15rem 0 5rem;
        }

        ul.list {
          padding: 10rem;
          display: flex;
          justify-content: left;
          align-items: center;
          flex-wrap: wrap;

          li {
            padding: 8rem 12rem;
            background-color: #eee;
            border-radius: 30rem;
            font-size: 13rem;
            color: #343434;
            margin: 0 10rem 10rem 0;

            &.active {
              color: #fc1c1c;
              border: 1rem solid #fc1c1c;
              background-color: #fff;
            }
          }
        }
      }

      .number {
        font-size: 14rem;
        color: #666;
        display: flex;
        justify-content: space-between;
        margin-top: 10rem;

        p {
        }

        .counter {
          height: 25rem;
          display: flex;
          color: #999;
          font-weight: bold;

          span {
            padding: 3rem 3rem;
            border: 1rem solid rgb(245, 245, 245);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 25rem;
          }

          input {
            width: 39rem;
            padding: 0;
            text-align: center;
            border: 1rem solid rgb(245, 245, 245);
          }
        }
      }
    }

    .action {
      height: 50rem;
      width: 100%;
      display: flex;
      justify-content: center;
      border-top: 1px solid rgb(245, 245, 245);
      align-items: center;
      position: fixed;
      bottom: 0;

      button {
        height: 35rem;
        width: 80%;
        border: none;
        font-size: 15rem;
        color: #fff;

        background: #f30300;
        border-radius: 17rem;

        &.color {
          background: #ff821c;
        }
      }
    }
  }
}
</style>